<template>
  <h2>糖尿病分析</h2>
  <hr style="margin-top: 10px" />
  <div id="main_echarts">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="echarts-div" id="att_class">图1 relation</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { post, get, setItem, getItem, remItem, GetDataTest } from "../../utils/com";
import { defineComponent } from "vue";
export default defineComponent({
  name: "Diabetes2",
  setup(props) {
    const att_data = [];
    att_data["names"] = [];
    att_data["data"] = [];
    return {
      att_data,
    };
  },
  methods: {
    initCharts() {
      this.att_chart = this.$echarts.init(document.getElementById("att_class"));
      //   this.att_setOptions();
    },
    att_setOptions() {
      var data = this.att_data;
      //   console.log(22222, this.att_chart, data);
      this.att_chart.setOption({
        title: {
          text: "患病与不患病的各属性人数占比",
          left: "center",
        },
        legend: {
          top: "10%",
        },
        tooltip: {
          trigger: "item",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "10%",
          top: "20%",
          right: "10%",
          bottom: "15%",
        },
        dataset: {
          dimensions: data["names"],
          source: data["data"],
        },
        xAxis: { type: "category" },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
          { type: "bar" },
        ],
      });
    },
    att_axios() {
      const _this = this;
      var myget = get("http://127.0.0.1:8000/diabetes/att").then(function (res) {
        var mydata = [];
        var names = [
          "id",
          "age",
          "gender",
          "polyuria",
          "polydipsia",
          "swl",
          "weak",
          "polyphagia",
          "gt",
          "vb",
          "itch",
          "irritate",
          "dh",
          "pp",
          "ms",
          "alopesia",
          "obesity",
        ];
        console.log(res);
        mydata["names"] = names;

        mydata["data"] = [];
        for (let key in res) {
          var d = res[key];
          d["id"] = key;
          mydata["data"].push(d);
        }

        console.log(mydata);
        _this.att_data = mydata;
        _this.att_setOptions();
        return res;
      });
    },
  },
  mounted() {
    const _this = this;
    this.initCharts();

    this.att_axios();
  },
});
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  margin: 5px;
  height: 500px;
  width: 100%;
  border-radius: 4px;
  min-height: 36px;
  border: 3px solid rgb(90, 89, 89);
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.echarts-div {
  height: 99%;
  width: 99%;
}
</style>
